<template>
  <div>
    <nut-tabs background="#fff" type="smile" swipeable v-model="currentMenu">
      <nut-tab-pane v-for="(item, index) in couponTabs" :key="index"
        :title="item.label">
        <div v-if="isShow">
          <coupon v-if="couponList.length" :disabled-tips="currentMenu == 2 ? '该优惠券已过期' : '该优惠券已使用'"
            :disabled="currentMenu == 2 || currentMenu == 1" v-for="(coupon_item, coupon_index) in couponList" :key="index"
            :res="coupon_item" relative @tap.stop="useItNow(coupon_item)">
            <template #footer>
              <div text-24rpx text-dark-color flex items-center mt-12rpx @tap.stop="couponDetail(coupon_item)">
                详细说明 <nut-icon size="10" name="rect-right"></nut-icon>
              </div>
            </template>
          </coupon>
          <div v-if="!couponList.length && screen" mt-100rpx>
            <!-- <div v-if="!couponList.length && screen" :style="{ height: (screen.windowHeight - 44 - 46) + 'px' }"> -->
            <empty text="暂无优惠券" />
          </div>
        </div>
      </nut-tab-pane>
    </nut-tabs>
    <nut-toast ref="toastRef" cover />
  </div>
</template>

<script setup lang="ts">
import coupon from '@/components/basic-template/coupon.vue';
import { getMemberCoupons } from '@/api/member';
import empty from '@/components/empty/index.vue';
import type { Search } from '@/constants/types';
import { onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app';
const isShow = ref(false)
const screen = ref<any>('')
const couponTabs = ref<any>([
  {
    label: "未使用",
    value: "NEW"
  },
  {
    label: "已使用",
    value: "USED"
  },
  {
    label: "已过期",
    value: "EXPIRE"
  },
])
const currentMenu = ref<number>(0)
const currentTab = ref(couponTabs.value[currentMenu.value].value)

const searchForm = ref<Search>({
  pageNumber: 1,
  pageSize: 20,
  memberCouponStatus: currentTab.value
})
const couponList = ref<any>([])
const couponData = ref<any>('')


// 优惠券详情
function couponDetail(item: any) {
uni.navigateTo({
  url:"/pages/mine/coupon/detail?item=" +encodeURIComponent(JSON.stringify(item))});
}
// 立即使用
function useItNow(item: any) {
  if (currentMenu.value == 0) {
    uni.navigateTo({
      url: `/pages/goods/search/page?promotionsId=${item.couponId}&promotionType=COUPON`,
    });
  }
}

async function init() {
  isShow.value = false
  couponList.value = []
  searchForm.value.pageNumber = 1
  await fetch()
}
watch(() => currentMenu.value, async () => {
  couponList.value = []
  currentTab.value = couponTabs.value[currentMenu.value]
  searchForm.value.memberCouponStatus = currentTab.value.value
  searchForm.value.pageNumber = 1
  await fetch()
})


async function fetch() {
  uni.stopPullDownRefresh();

  const res = await getMemberCoupons(searchForm.value)
  isShow.value = true
  if (res.data.success) {
    couponList.value.push(...res.data.result.records)
    couponData.value = res.data.result
  }
}

onPullDownRefresh(() => {
  init()
})
onReachBottom(() => {
  if (couponData.value?.total > searchForm.value.pageNumber * searchForm.value.pageSize) {
    searchForm.value.pageNumber++;
    fetch()
  }
})

onMounted(async () => {
  init();
  screen.value = await uni.getSystemInfo()
})


</script>

<style scoped lang="scss">
::v-deep .nut-tab-pane { 
  background: #f8f8f8 !important;
  padding: 16rpx 0 !important;
}
</style>
